import Common from '../common'
import echarts from 'echarts'
import axios from 'axios'
import region from '../../utils/cityTencent.json'
var Js = Common('dashboard')
export default {
	name: 'dashboard',
	mixins: [Js],
	components: {},
	data() {
		return {

			visitorPaginate: {
				count: 0,
				currentPage: 1,
				pagesize: 10,
				is_page: true,
				page_sizes: [10, 30, 60, 90],
				layout: 'total, sizes, prev, pager, next, jumper',
			},
			searchItem: {
				behavior: 1,
				transport_status: 0
			},
			startSearchItem: {
				behavior: 1,
				transport_status: 0
			},
			optionData: {
				labelOptions: [],
				typeOptions: [{
					text: '未处理',
					value: 0
				}, {
					text: '已处理',
					value: 1
				}],
			},
			otherData: {},
			UserInfo: {
				tableName: 'UserInfo',
				searchItem: {},
				fixSearchItem: {
					status: 1
				},
				key: 'user_no',
				middleKey: 'user_no',
				condition: 'in',
			},

			user: {},
			isSign: false,
			visitorData: [],
			echartsOptions: {},
			loading: false,


			weatherTxt: '',
			weather: {},
			weatherData: {},

			echartsOptions1: null,
			echartsOptions2: null,
			echartsOptions3: null,

			rankData:[],
      regionOptions: [],
      timeArr: [],
      timeArr1: [],
      title: '',
      title1: '',
      region: [],
      region1: [],

      mainData: [],
      mainData1: []
		}

	},

	mounted() {
    this.regionOptions = region;
		this.init()
	},
	computed: {
		token: function() {
			return this.$store.getters.getToken
		}
	},
	methods: {


		timeChange(e) {
			const self = this;
			if (e.value && e.value != null) {
				self.timeArr = e.value;
			} else {
				self.timeArr = [];
			};
			console.log('timeChange', e)
		},

		/**
		 * 初始化
		 */
		init() {
      this.timeArr = this.getMonth(Date.now());
      this.timeArr1 = this.getMonth(Date.now());
			this.initMainData();
      this.statisticTwo();
		},

		/**
		 *
		 */

    getMonth(date) {
      let inDate = new Date(date)
      let year = inDate.getFullYear()
      let month = inDate.getMonth()
      let startTime = new Date(year, month, 1).getTime()
      let endTime = new Date(year, month + 1, 1).getTime() - 1
      return [parseInt(startTime), parseInt(endTime)]
    },


//收益
		async initMainData(isNew) {

			const self = this;
			const postData = {
        s_time: parseInt(self.timeArr[0]/1000),
        e_time: parseInt(self.timeArr[1]/1000),
        region: self.region.length>0?self.region.join(','):'',
        title: self.title,
      };
			postData.token = self.$store.getters.getToken;
			var res = await self.$$api_statistic({
				data: postData
			});
      self.mainData = res.info.data;
			// self.initVisitorData(res.info.data);
		},

//产品销量销售额
    async statisticTwo(isNew) {

    	const self = this;
    	const postData = {
        s_time: parseInt(self.timeArr1[0]/1000),
        e_time: parseInt(self.timeArr1[1]/1000),
        region: self.region1.length>0?self.region1.join(','):'',
        title: self.title1,
      };
    	postData.token = self.$store.getters.getToken;
    	var res = await self.$$api_statisticTwo({
    		data: postData
    	});
    	self.mainData1 = res.info.data;
    	// self.initVisitorData1(res.info.data, 'echartsOptions2');
    	// self.initVisitorData1(res.info.data, 'echartsOptions3');
    },


		/**
		 * 列表主函数
		 */
		async initVisitorData(data) {
			const self = this;
			var option = {
				color: ['#00c0dd', '#ffcf7c', '#aaaaff', '#ff6ba6', '#53e6a2'],
				title: {
					text: '收益'
				},
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'cross',
						label: {
							backgroundColor: '#6a7985'
						}
					}
				},
				legend: {
					data: ['业绩','利润']
				},
				toolbox: {
					feature: {
						saveAsImage: {}
					}
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				xAxis: [{
					type: 'category',
					boundaryGap: false,
					data: []
				}],
				yAxis: [{
					type: 'value'
				}],
				series: [{
					name: '业绩',
					type: 'line',
					stack: 'Total',
					smooth: true,
					lineStyle: {
						width: 0
					},
					showSymbol: false,
					areaStyle: {
						opacity: 0.8
					},
					emphasis: {
						focus: 'series'
					},
					data: []
				},{
					name: '利润',
					type: 'line',
					stack: 'Total',
					smooth: true,
					lineStyle: {
						width: 0
					},
					showSymbol: false,
					areaStyle: {
						opacity: 0.8
					},
					emphasis: {
						focus: 'series'
					},
					data: []
				}, ]
			};
			self.echartsOptions1 = option;
			data.forEach((item, index) => {
				option.series[0].data.push(item.orderPrice)
				option.series[1].data.push(item.orderOPrice)
				option.xAxis[0].data.push(self.$$timeto(item.s_time*1000,'ymd'))
			})
		},


    async initVisitorData1(data, type) {
    	const self = this;
    	const posList = [
    	  'left',
    	  'right',
    	  'top',
    	  'bottom',
    	  'inside',
    	  'insideTop',
    	  'insideLeft',
    	  'insideRight',
    	  'insideBottom',
    	  'insideTopLeft',
    	  'insideTopRight',
    	  'insideBottomLeft',
    	  'insideBottomRight'
    	];
    	app.configParameters = {
    	  rotate: {
    	    min: -90,
    	    max: 90
    	  },
    	  align: {
    	    options: {
    	      left: 'left',
    	      center: 'center',
    	      right: 'right'
    	    }
    	  },
    	  verticalAlign: {
    	    options: {
    	      top: 'top',
    	      middle: 'middle',
    	      bottom: 'bottom'
    	    }
    	  },
    	  position: {
    	    options: posList.reduce(function (map, pos) {
    	      map[pos] = pos;
    	      return map;
    	    }, {})
    	  },
    	  distance: {
    	    min: 0,
    	    max: 100
    	  }
    	};
    	app.config = {
    	  rotate: 90,
    	  align: 'left',
    	  verticalAlign: 'middle',
    	  position: 'insideBottom',
    	  distance: 15,
    	  onChange: function () {
    	    const labelOption = {
    	      rotate: app.config.rotate,
    	      align: app.config.align,
    	      verticalAlign: app.config.verticalAlign,
    	      position: app.config.position,
    	      distance: app.config.distance
    	    };
    	    myChart.setOption({
    	      series: [
    	        {
    	          label: labelOption
    	        },
    	        {
    	          label: labelOption
    	        },
    	        {
    	          label: labelOption
    	        },
    	        {
    	          label: labelOption
    	        }
    	      ]
    	    });
    	  }
    	};
    	const labelOption = {
    	  show: true,
    	  position: app.config.position,
    	  distance: app.config.distance,
    	  align: app.config.align,
    	  verticalAlign: app.config.verticalAlign,
    	  rotate: app.config.rotate,
    	  formatter: '{c}  {name|{a}}',
    	  fontSize: 16,
    	  rich: {
    	    name: {}
    	  }
    	};
    	var option = {
        color: type=='echartsOptions2'?['#aaaaff', '#53e6a2']:['#ff6ba6', '#53e6a2'],
    	  tooltip: {
    	    trigger: 'axis',
    	    axisPointer: {
    	      type: 'shadow'
    	    }
    	  },
    	  legend: {
    	    data: type=='echartsOptions2'?['销售额']:['销量']
    	  },
    	  toolbox: {
    	    show: true,
    	    orient: 'vertical',
    	    left: 'right',
    	    top: 'center',
    	    feature: {
    	      mark: { show: true },
    	      dataView: { show: true, readOnly: false },
    	      // magicType: { show: true, type: ['line', 'bar', 'stack'] },
    	      restore: { show: true },
    	      saveAsImage: { show: true }
    	    }
    	  },
    	  xAxis: [
    	    {
    	      type: 'category',
    	      axisTick: { show: false },
    	      data: []
    	    }
    	  ],
    	  yAxis: [
    	    {
    	      type: 'value'
    	    }
    	  ],
    	  series: [
    	    {
    	      name: type=='echartsOptions2'?'销售额':'销量',
    	      type: 'bar',
    	      barGap: 0,
    	      label: labelOption,
    	      emphasis: {
    	        focus: 'series'
    	      },
    	      data: []
    	    },
    	    {
    	      name: '销量',
    	      type: 'bar',
    	      label: labelOption,
    	      emphasis: {
    	        focus: 'series'
    	      },
    	      data: []
    	    },
    	  ]
    	};
    	self[type] = option;
    	data.forEach((item, index) => {
    		if(type=='echartsOptions2'){
          option.series[0].data.push(item.sumPrice)
        }else{
          option.series[0].data.push(item.sumCount)
        }
    		option.xAxis[0].data.push(item.title)
    	})
    },


    async excelOutput() {
      const self = this;
      const postData = {
        s_time: parseInt(self.timeArr1[0]/1000),
        e_time: parseInt(self.timeArr1[1]/1000),
        region: self.region1.length>0?self.region1.join(','):'',
        title: self.title1,
      };
      postData.token = self.$store.getters.getToken;
      postData.excelOutput = {
        expTitle: '产品销售额/销量统计【'+self.$$timeto(self.timeArr1[0],'ymd')+'至'+self.$$timeto(self.timeArr1[1],'ymd')+'】',
        expCellName: [{
            title: '商品名称',
            key: ['title'],
            type: 'string',
          },
          {
            title: '销售额',
            key: ['sumPrice'],
            type: 'string',
          },
          {
            title: '销量',
            key: ['sumCount'],
            type: 'string',
          },
        ],
        fileName: 'test'
      };
      // var res = await self.$$api_statisticTwo({
      // 	data: postData
      // });
      // $$api_statisticTwo
      window.open('https://testtwo.solelyplus.com/680/public/index.php/api/v1/Project/Solely/statisticTwo?excelOutput=' +
        JSON.stringify(postData.excelOutput)
        + '&s_time='+postData.s_time
        + '&e_time='+postData.e_time
        + '&region='+postData.region
        + '&title='+postData.title)
    },

	},


}
